<template>
  <div id="waveplansmaintenanceDeawer">
    <!-- <detail :inputConfig="inputConfig"></detail> -->
    <el-card class="base-card">
      <div slot="header">
        <span>{{ $t('wave.basicInfo') }}</span>
      </div>
      <div class="card-content">
        <el-form :show-message="true"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="base-form"
         
        >
          <el-form-item
            :label="$t('wave.waveStrategy')"
            prop="waveStrategy"
            class="base-width-25"
          >
            <el-select
              v-model="ruleForm.waveStrategy"
              filterable
              remote
              reserve-keyword
              placeholder=""
              :remote-method="remoteMethod"
              @change="selectWaveStrategy"
            >
              <el-option
                v-for="item in options"
                :key="item.filterid"
                :label="item.filtername"
                :value="item.filterid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('wave.planName')"
            prop="planName"
            class="base-width-25"
          >
            <el-input v-model="ruleForm.planName"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('wave.effectrang')"
            prop="plan_effect_time"
            class="base-width-50"
          >
            <el-date-picker
              v-model="ruleForm.plan_effect_time"
              type="daterange"
              range-separator="至"
              :unlink-panels="true"
              :start-placeholder="$t('app.startDate')"
              :end-placeholder="$t('app.endDate')"
              format="yyyy-MM-dd"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('wave.cycle')"
            prop="type"
            class="base-width-50 label-100"
          >
            <el-checkbox-group v-model="ruleForm.type">
              <!-- <el-checkbox label="每天" name="type" :indeterminate="isIndeterminate"></el-checkbox> -->
              <el-checkbox :label="$t('week.1')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.2')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.3')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.4')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.5')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.6')" name="type"></el-checkbox>
              <el-checkbox :label="$t('week.7')" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            :label="$t('wave.executionrang')"
            prop="execution_time_interval"
            class="base-width-50"
          >
            <el-time-picker
              is-range
              v-model="ruleForm.execution_time_interval"
              :editable="false"
              :clearable="true"
              :range-separator="$t('other.to')"
              :start-placeholder="$t('out.starttime')"
              :end-placeholder="$t('out.endtime')"
              format="HH:mm:ss"
              @change="setTimeInterval"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item
            :label="$t('wave.refreshFre')"
            prop="refreshFrequency"
            class="base-width-10"
          >
            <el-input placeholder="" v-model="ruleForm.refreshFrequency">
              <template slot="append">{{ $t('wave.minute') }}</template>
            </el-input>
          </el-form-item>
          <el-form-item class="base-width-100" style="text-align:center;">
            <el-button type="primary" :disabled="!this.btnPermNameList.includes('WM05010304')" @click="submitForm('ruleForm')">{{
              $t("common.save")
            }}</el-button>
            <el-button @click="cancel" :disabled="!this.btnPermNameList.includes('WM05010305')" >{{ $t("common.cancel") }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  outWaveStrategyPlanSave,
  outWaveStrategyPlanEdit,
  outWaveStrategyPlanQueryGroupName,
} from "@/api/business/wave";
import baseMixin from "@/mixins/BaseMixin";
export default {
  name: "waveplansmaintenanceDeawer",
  mixins: [baseMixin],
  data() {
    return {
      newFlag: false,
      isIndeterminate: false,
      options: [],
      waveStrategyObj: {},
      ruleForm: {
        waveStrategy: "",
        planName: "",
        plan_effect_time: [],
        type: [
          this.$t("week.1"),
          this.$t("week.2"),
          this.$t("week.3"),
          this.$t("week.4"),
          this.$t("week.5"),
          this.$t("week.6"),
          this.$t("week.7"),
        ],
        execution_time_interval: null,
        refreshFrequency: "",
      },
      rules: {
        waveStrategy: [
          { required: true, message: this.$t('wave.waveStrategyMessage'), trigger: "change" },
        ],
        planName: [
          {
            required: true,
            message: this.$inputPlease("wave.planName"),
            trigger: "blur",
          },
        ],
        plan_effect_time: [
          {
            type: "array",
            required: true,
            message: this.$selectPlease("app.dateRange"),
            trigger: "change",
          },
        ],
        execution_time_interval: [
          {
            type: "array",
            required: true,
            message: this.$selectPlease("app.timeRange"),
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: this.$t('wave.message'),
            trigger: "change",
          },
        ],
        refreshFrequency: [
          {
            required: true,
            message: this.$inputPlease("wave.refreshFre"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip;
      this.newFlag = data.newFlag;
    } else {
      this.newFlag = this.$store.state.newFlag;
    }
    if (!this.newFlag) {
      let obj = this.$store.state.routeData;
      let arr = [];
      this.waveStrategyObj = obj;
      this.ruleForm.waveStrategy = obj.waveStrategyName;
      this.ruleForm.planName = obj.planName;
      // 此处直接赋值会导致时间显示失败
      // this.ruleForm.plan_effect_time[0] = new Date(obj.planBgnDate);
      // this.ruleForm.plan_effect_time[1] = new Date(obj.planEndDate);
      this.$set(this.ruleForm, "plan_effect_time", [
        new Date(obj.planBgnDate),
        new Date(obj.planEndDate),
      ]);
      this.ruleForm.execution_time_interval = [];
      this.ruleForm.execution_time_interval[0] = new Date(obj.startRuningTime);
      this.ruleForm.execution_time_interval[1] = new Date(obj.endRuningTime);
      const data = {
        mondayExecute: this.$t("week.1"),
        tuesdayExecute: this.$t("week.2"),
        wendesdayExecute: this.$t("week.3"),
        thursdayExecute: this.$t("week.4"),
        fridayExecute: this.$t("week.5"),
        saturdayExecute: this.$t("week.6"),
        sundayExecute: this.$t("week.7"),
      };
      Object.keys(obj).forEach((key) => {
        if (obj[key] === 1) {
          arr.push(data[key]);
        }
      });
      // obj.mondayExecute === 1 ? arr.push(this.$t('week.1')) : arr = arr;
      // obj.tuesdayExecute === 1 ? arr.push(this.$t('week.2')) : arr = arr;
      // obj.wendesdayExecute === 1 ? arr.push(this.$t('week.3')) : arr = arr;
      // obj.thursdayExecute === 1 ? arr.push(this.$t('week.4')) : arr = arr;
      // obj.fridayExecute === 1 ? arr.push(this.$t('week.5')) : arr = arr;
      // obj.saturdayExecute === 1 ? arr.push(this.$t('week.6')) : arr = arr;
      // obj.sundayExecute === 1 ? arr.push(this.$t('week.7')) : arr = arr;
      this.ruleForm.type = arr;
      this.ruleForm.refreshFrequency = obj.refreshFrequency;
    } else {
      this.ruleForm = {
        waveStrategy: "",
        planName: "",
        plan_effect_time: [],
        type: [
          this.$t("week.1"),
          this.$t("week.2"),
          this.$t("week.3"),
          this.$t("week.4"),
          this.$t("week.5"),
          this.$t("week.6"),
          this.$t("week.7"),
        ],
        // execution_time_interval: [new Date(new Date().getFullYear(), new Date().getMonth + 1, new Date().getDate(), 8, 0), new Date(new Date().getFullYear(), new Date().getMonth + 1, new Date().getDate(), 18, 0)],
        execution_time_interval: [
          new Date(2022, 8, 12, 8, 0),
          new Date(2022, 8, 12, 18, 0),
        ],
        refreshFrequency: "",
      };
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {};
          data.planName = this.ruleForm.planName;
          data.planBgnDate = this.ruleForm.plan_effect_time[0];
          data.planEndDate = this.ruleForm.plan_effect_time[1];
          data.startRuningTime = this.ruleForm.execution_time_interval[0].getTime();
          data.endRuningTime = this.ruleForm.execution_time_interval[1].getTime();
          this.ruleForm.type.includes(this.$t("week.1"))
            ? (data.mondayExecute = 1)
            : (data.mondayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.2"))
            ? (data.tuesdayExecute = 1)
            : (data.tuesdayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.3"))
            ? (data.wendesdayExecute = 1)
            : (data.wendesdayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.4"))
            ? (data.thursdayExecute = 1)
            : (data.thursdayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.5"))
            ? (data.fridayExecute = 1)
            : (data.fridayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.6"))
            ? (data.saturdayExecute = 1)
            : (data.saturdayExecute = 0);
          this.ruleForm.type.includes(this.$t("week.7"))
            ? (data.sundayExecute = 1)
            : (data.sundayExecute = 0);
          data.refreshFrequency = this.ruleForm.refreshFrequency;
          if (this.newFlag) {
            // 保存
            // 此时要判断开始日期需要大于当前日期
            let startTime = new Date(new Date().toLocaleDateString()).getTime(); // 当天0点
            if (this.ruleForm.plan_effect_time[0] < startTime) {
              this.$message.error(this.$t('msg.msg73'));
              return;
            }
            data.warehouseId = this.$store.state.wms;
            data.waveStrategyId = this.ruleForm.waveStrategy;
            data.waveStrategyName = this.waveStrategyObj.filtername;
            outWaveStrategyPlanSave(data).then((res) => {
                this.$message.success(this.$t('app.saveMes'));
                this.cancel();
            });
          } else {
            data.warehouseId = this.$store.state.routeData.warehouseId;
            data.waveStrategyName = this.waveStrategyObj.waveStrategyName;
            data.waveStrategyId = this.waveStrategyObj.waveStrategyId;
            data.id = this.$store.state.routeData.id;
            // 此时要判断结束日期大于当前日期
            let endTime = new Date(new Date().toLocaleDateString()).getTime(); //当天00:00
            console.log(this.ruleForm.plan_effect_time[1]);
            console.log(endTime);
            if (this.ruleForm.plan_effect_time[1] < endTime) {
              this.$message.error(this.$t('msg.msg74'));
              return;
            }
            // 更新
            outWaveStrategyPlanEdit(data).then((res) => {
                this.$message.success(this.$t('app.upMes'));
                this.cancel();
            });
          }
        } else {
          console.log("输入参数有误,请检查后重新保存!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelect(item) {
      console.log(item);
    },
    remoteMethod(queryString, cb) {
      if (queryString.length !== 0) {
        outWaveStrategyPlanQueryGroupName(queryString).then((res) => {
            this.options = res.list;
          
        });
      }
    },
    cancel() {
      // this.$router.push({ name: "waveplansmaintenance" });
      this.$router.go(-1);
    },
    setTimeInterval(time) {
      console.log(time);
    },
    selectWaveStrategy(data) {
      if (this.newFlag) {
        this.waveStrategyObj = this.options.filter((item) => {
          return item.filterid === data;
        })[0];
        this.ruleForm.planName = this.waveStrategyObj.filtername;
      } else {
        this.ruleForm.planName = this.options.filter((item) => {
          return item.filterid === data;
        })[0].filtername;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
